<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Archived Sites</title>
        <style>
            :root {
                --accent-1: #aa1e55;
                --accent-2: #ffebeb;
                --accent-3: #efefef;
                
                --bg-main: #efefef;
                --text-main: black;
                --text-1: #1a1a1a;
                --text-2: #eaeaea;
            }
            
            @media (prefers-color-scheme: dark) {
                :root {
                    --accent-2: hsl(160, 100%, 96%);
                    
                    --text-1: #eaeaea;
                    --text-2: #1a1a1a;
                    --bg-main: #101010;
                }
                
                #table-bookmarks_wrapper,
                #table-bookmarks_wrapper img,
                tbody td:nth-child(3),
                tbody td:nth-child(3) span,
                footer {
                    filter: invert(100%);
                }
            }
            html, body {
                width: 100%;
                height: 100%;
                font-size: 18px;
                font-weight: 200;
                text-align: center;
                margin: 0px;
                padding: 0px;
                font-family: "Gill Sans", Helvetica, sans-serif;
                background: var(--bg-main);
                color: var(--text-main);
            }
            header {
                background-color: var(--accent-1);
                color: var(--text-1);
                padding: 10px;
                padding-top: 0px;
                padding-bottom: 15px;
                /*height: 40px;*/
            }
            header h1 {
                margin: 7px 0px;
                font-size: 35px;
                font-weight: 300;
                color: var(--text-1);
            }
            header h1 img {
                height: 44px;
                vertical-align: bottom;
            }
            header a {
                text-decoration: none !important;
                color: var(--text-1);
            }
            .header-center {
                margin: auto;
                float: none;
                text-align: center;
                padding-top: 6px;
            }
            .header-center small {
                color: var(--text-2);
                opacity: 0.7;
            }
            .header-left {
                float: left;
            }
            .header-right {
                float: right;
                padding-top: 17px;
                padding-right: 10px;
            }
            header + div {
                padding-top: 10px;
            }
            #table-bookmarks_length, #table-bookmarks_filter {
                padding: 0px 15px;
            }
            table {
                padding: 6px;
                width: 100%;
            }
            table thead th {
                font-weight: 400;
            }
            table tr {
                height: 35px;
            }
            tbody tr:nth-child(odd) {
               background-color: var(--accent-2) !important;
            }
            table tr td {
                white-space: nowrap;
                overflow: hidden;
                /*padding-bottom: 0.4em;*/
                /*padding-top: 0.4em;*/
                padding-left: 2px;
                text-align: center;
            }
            table tr td a {
                text-decoration: none;
            }
            table tr td img, table tr td object {
                display: inline-block;
                margin: auto;
                height: 24px;
                width: 24px;
                padding: 0px;
                padding-right: 5px;
                vertical-align: middle;
                margin-left: 4px;
            }
            #table-bookmarks {
                width: 100%; 
                overflow-y: scroll;
                table-layout: fixed;
            }
            table tr a span[data-archived~=False] {
                opacity: 0.4;
            }
            .files-spinner {
                height: 15px;
                width: auto;
                opacity: 0.5;
                vertical-align: -2px;
            }
            .in-progress {
                display: none;
            }
            body[data-status~=finished] .files-spinner {
                display: none;
            }
            /*body[data-status~=running] .in-progress {
                display: inline-block;
            }*/
            tr td a.favicon img {
                padding-left: 6px;
                padding-right: 12px;
                vertical-align: -4px;
            }
            tr td a.title {
                font-size: 1.4em;
                text-decoration:none;
                color:black;
            }
            tr td a.title small {
                background-color: var(--accent-3);
                border-radius: 4px;
                float:right
            }
        </style>
        <link rel="stylesheet" href="static/jquery.dataTables.min.css"/>
        <script src="static/jquery.min.js"></script>
        <script src="static/jquery.dataTables.min.js"></script>
        <script>
            document.addEventListener('error', function(e) {
              e.target.style.opacity = 0;
            }, true)
            jQuery(document).ready(function() {
                jQuery('#table-bookmarks').DataTable({
                    stateSave: true, // save state (filtered input, number of entries shown, etc) in localStorage
                    dom: '<lf<t>ip>', // how to show the table and its helpers (filter, etc) in the DOM
                    order: [[0, 'desc']],
                    iDisplayLength: 100,
                });
            });
        </script>
    </head>
    <body data-status="$status">
        <header>
            <div class="header-right">
                <a href="https://github.com/pirate/ArchiveBox/wiki">Documentation</a> &nbsp; | &nbsp; 
                <a href="https://github.com/pirate/ArchiveBox">Source</a> &nbsp; | &nbsp; 
                <a href="https://archivebox.io">Website</a>
            </div>
            <div class="header-left">
                <a href="?" title="Reload...">
                    <h1><img src="static/archive.png"/> ArchiveBox: Index</h1>
                </a>
            </div>
            <div class="header-center">
                Archived Sites
                <!--<span class="in-progress">(Currently Updating)</span>-->
                <br/>
                <small>Last updated $time_updated</small>
            </div>
        </header>
        <table id="table-bookmarks">
            <thead>
                <tr>
                    <th style="width: 80px;">Bookmarked</th>
                    <th style="width: 26vw;">Saved Link ($num_links)</th>
                    <th style="width: 50px">Files</th>
                    <th style="width: 16vw;whitespace:nowrap;overflow-x:hidden;">Original URL</th>
                </tr>
            </thead>
            <tbody>$rows</tbody>
        </table>
        <footer>
            <br/>
            <center>
                <small>
                    Archive created using <a href="https://github.com/pirate/ArchiveBox" title="Github">ArchiveBox</a>
                    version <a href="https://github.com/pirate/ArchiveBox/commit/$git_sha" title="Git commit">$short_git_sha</a> &nbsp; | &nbsp; 
                    Download index as <a href="index.json" title="JSON summary of archived links.">JSON</a>
                    <br/><br/>
                    $footer_info
                </small>
            </center>
            <br/>
        </footer>
    </body>
</html>
